<template>
  <div>
    父组件
    <Input @add='addHandler'></Input>
    <List :list="list" @delete='deleteHandler'></List>
  </div>
</template>

<script>
import Input from './Input.vue'
import List from './List.vue'
export default {
  components: {
    Input,
    List
  },
  data () {
    return {
      list: [
        { id: 1, title: 'item1' },
        { id: 2, title: 'item2' }
      ]
    }
  },
  methods: {
    addHandler(title) {
      this.list.push({ id: `${Date.now()}`, title })
    },
    deleteHandler(id) {
      this.list = this.list.filter(item => {
        return item.id !== id
      })
    }
  }
}
</script>

<style>
</style>
